<template>
	<view v-if="isLogin == true">
		<scroll-view class="sidebar" scroll-y="true">
				<view @click="selectClick(index)" v-for="(item,index) in menuOptions" :key="index" class="flex-row" style="height: 50px; font-size: 16px;">
					<view style="width: 4px; height: 100%;" :style="{backgroundColor: selectIndex===index? '#3474F6':'#FFFFFF'}">
						
					</view>
					<view class="zsConter" style="flex-grow: 1; font-weight: bold;" :style="{color: selectIndex===index? '#3474F6':'#999',backgroundColor: selectIndex===index? '#F8F8F8':'#FFFFFF'}" >
						{{item.text}}
					</view>
				</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import config from '@/admin.config.js'
	export default {
		data() {
			return {
				...config.sideBar,
				field: 'url as value, name as text, menu_id, parent_id, sort, icon, permission',
				currentMenu: '/',
				menuOptions: [
				        {
				          text: '添加资源',
				          path: '../add-resource-page/add-resource-page'
				        },
						{
						  text: '批量处理',
						  path: '../batch-add-page/batch-add-page'
						},
				        {
				          text: '资源列表',
				          path: '../resource-list-page/resource-list-page'
				        },
						{
						  text: '分类管理',
						  path: '../class-manage-page/class-manage-page'
						}
				       
				      ],
					  selectIndex:0,
					  isLogin:true
			}
		},
		
		onLoad() {
			console.log("onLoad211===");
	
		  	

		},
		onShow() {
			// this.isLogin = this.$isLogin;
			console.log("onLoad213331===");
		},
		methods: {
			selectClick(index){
				this.selectIndex = index;
				var model = this.menuOptions[index];
				var url = model.path;
				// TODO 后续要调整
				uni.redirectTo({
					url: url,
					fail: () => {
						uni.showModal({
							title: '提示',
							content: '页面 ' + url + ' 跳转失败',
							showCancel: false
						})
					}
				})
				if (navigator.userAgent.indexOf('Mobile') > -1) {
				    // 移动端
					console.log('当前移动端===')
					uni.hideLeftWindow({});
				} else {
				    // PC端
				    console.log('当前pc端===')
				}
			}
		}
	}
</script>

<style lang="scss">
	.sidebar {
		position: fixed;
		// top: var(--top-window-height); // useless
		width: 150px;
		height: calc(100vh - (var(--top-window-height)));
		box-sizing: border-box;
		border-right: 1px solid darken($left-window-bg-color, 8%);
		background-color: $left-window-bg-color;
		padding-bottom: 10px;
	}
	/* #ifdef H5 */
	.sidebar ::-webkit-scrollbar {
		display: none;
		// scrollbar-width: thin;
	}
	/* #endif */

	.title {
		margin-left: 5px;
	}
</style>
